chrome插件最新版本开发指南来了 |
您所在的位置：网站首页 › chrome 880432493 › chrome插件最新版本开发指南来了 |
chrome插件最新版本开发指南来了
|
网上关于chrome插件开发的教程有不少，可惜都是基于第二版本(manifest V2)，chrome官方在2020年11月就推出第三版(manifest V3)的开发规范了，但是感觉国内很少有插件基于此进行开发，更别说相关方面的介绍了，掘金也提供了一个插件，解压打开看了一下，也是manifest V2。赶紧拥抱第三版吧，因为官方给出了Manifest V2 support timeline，现在都2022了，2023就完全不能用Manifest V2版本的插件了，还不赶紧跟随官方的脚步，学学Manifest V3的开发姿势，别说学不动了，其实差别不是那么大，别慌😁。
在正式介绍之前，想说一点的是我们眼中的插件官方称为extensions(扩展)，而真正的浏览器插件是更加底层的工具集了，我还是遵循官方文档来吧，叫扩展，后面就没有插件一说了。最后再说一下其实我没有运用第二版进行过开发，我直接看最新的版本，下面都是v3的介绍。 Hello, extensions把官网的例子搬过来，我们开始第一个hello-world插件的体验之旅，首先介绍一下项目目录，很简单，包含三个文件。 --hello-world --hello.html // 插件界面 --hello_extensions.png // 插件图标 --manifest.json // 配置文件 复制代码 manifest.json { "name": "Hello Extensions", "description": "Base Level Extension", "version": "1.0", // 扩展的自定义版本 "manifest_version": 3, "action": { "default_popup": "hello.html", // 扩展的页面 "default_icon": "hello_extensions.png" // 扩展的图标 }, "commands": { "_execute_action": { "suggested_key": { // 打开扩展页面的快捷键 "default": "Ctrl+Shift+F", "mac": "MacCtrl+Shift+F" }, "description": "Opens hello.html" } } } 复制代码minifest.json是扩展程序的配置文件，是必须要的，除了常规的名称、版本等信息，action在这里负责配置插件的视图页面和图标，commands._execute_action是快捷打开扩展的键盘命令组合。 hello.html Hello Extensions 复制代码hello.html十分简单，这里没什么好说的，hello_extensions.png图标随便找一个就行了。以上就实现了一个hello world扩展的开发，还是很简单的吧，现在需要在本地把这个扩展跑起来，总共分为三步： Navigate to chrome://extensions in your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over More Tools and selecting Extensions. Check the box next to Developer Mode. Click Load Unpacked Extension and select the directory for your "Hello Extensions" extension. 别看一大堆英文，其实很简单，就像下图，要打开开发者模式，第一次点击【加载已解压的扩展程序】，选择你本地的扩展文件夹，后续更新的话点击扩展程序卡片下的更新图标即可。UI就是扩展那些能被用户看到的东西了，例如弹窗的页面，url状态栏后面的图标等，主要有如下几种： icons icons包含url地址栏后面显示的图标，放在应用市场展示的图标等等，通过default_icon进行配置： { "name": "My Awesome page_action Extension", ... "action": { "default_icon": { "16": "extension_toolbar_icon16.png", "32": "extension_toolbar_icon32.png", "48": "extension_toolbar_icon48.png", "128": "extension_toolbar_icon128.png" } } ... } 复制代码关于这四种尺寸有如下说明： Icon SizeIcon Use16x16favicon on the extension's pages32x32Windows computers often require this size. Providing this option will prevent size distortion from shrinking the 48x48 option.48x48displays on the extensions management page128x128displays on installation and in the Chrome WebstorePopup Popup就是一个html页面，当用户点击了插件图标，一个弹窗就显示出来了，和普通的html类似，可以包含样式或者脚本，但是不容许内联脚本。用过chrome扩展的都应该很熟悉了，是这样子的：
为扩展添加弹窗，首先要在manifest.json里注册，然后就可以像写普通的html一样了。 "action": { "default_popup": "popup.html" } 复制代码Tooltip 当用户鼠标悬停在扩展图标上时显示的描述文字，使用也比较简单； Override pages Override pages比较有意思，可以覆盖浏览器的一些默认页面，例如新开一个空白的标签页，可以替换成我们自己的： { "name": "Awesome Override Extension", ... "chrome_url_overrides" : { "newtab": "override_page.html" }, ... } 复制代码 New Tab Hello World 复制代码这样当浏览器新开了一个标签页，就会显示我们的override_page.html页面。当然除了newtab，还有bookmarks和history行为可以覆盖。 background scripts 1.概念根据字面意思，就是在后台运行的脚本，它的作用是赋予扩展监控浏览器行为的能力，例如打开了一个新的页面，移除了书签，关闭了一个标签页等，通过注册事件可以对感兴趣的浏览器事件做出反馈。启用需要在manifest.json里面添加如下配置： "background": { "service_worker": "background.js" // "type": "module" 可选项，支持esm，让你可以在脚本里import其他代码 }, 复制代码 //// background.js //// chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ "id": "sampleContextMenu", "title": "Sample Context Menu", "contexts": ["selection"] }); }); 复制代码需要强调的一点是我们配置的background script脚本文件必须位于扩展项目的根目录，否则无效。 2.脚本加载官方给出了如下几种加载的举例： 扩展第一次安装或版本更新时； 脚本监听的事件被触发； 其他脚本或者扩展发送消息； 扩展中其他视图，例如popup弹框页，调用runtime.getBackgroundPage方法； 3.脚本卸载一旦脚本被加载，会一致运行，直到所有视图和消息端口都被关闭才会被卸载。 4.chrome apis前面提到，background script主要是监听浏览器派发的各种事件和调用各种api，那么具体有哪些呢，官方提供了详细的文档，这里就不列举了，用的时候再去慢慢找吧。 content scripts 1.概念Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension. 上面是官方的介绍，简单来说，就是安装了你的扩展之后，你的扩展可以通过content scripts注入到任何你感兴趣的用户浏览的页面中去，你可以操作DOM，覆盖样式，想象的空间就很大了，我记得有一款扩展是美化页面的，也就是通过这种方式去实现的。 在第一个例子的基础上，我们修改配置项加入content scripts: "content_scripts": [ { "matches": ["https://*.baidu.com/*"], // 匹配需要注入的站点，必须提供 "css": ["my-styles.css"], // 也可以注入css，还可以注入多个 "js": ["content-script.js"] // 按照书写顺序依次注入 } ], 复制代码提供好注入的css和js后，重新加载一下扩展，打开百度，你就可以看到效果了，是不是很强大👏。 2.注入的两种方式静态声明 这种方式就是刚演示过的，在manifest.json中声明css/js/matches，除了这三种配置项，还有几种： run_at 决定脚本何时注入页面中，默认document_idle，还有document_start和document_end，关于这三者的区别，官网也有详细的描述： NameTypeDescriptiondocument_idlestringPreferred. Use "document_idle" whenever possible. The browser chooses a time to inject scripts between "document_end" and immediately after the window.onload event fires. The exact moment of injection depends on how complex the document is and how long it is taking to load, and is optimized for page load speed. Content scripts running at "document_idle" do not need to listen for the window.onload event, they are guaranteed to run after the DOM is complete. If a script definitely needs to run after window.onload, the extension can check if onload has already fired by using the document.readyState property.document_startstringScripts are injected after any files from css, but before any other DOM is constructed or any other script is run.document_endstringScripts are injected immediately after the DOM is complete, but before subresources like images and frames have loaded.根据我的理解，document_idle在document_end和window.onload之间的某个时刻，这个时候，DOM已经加载完毕，上面也说到注入的脚本保证在DOM已经解析完毕才执行；document_start在脚本执行和DOM解析之前，document_end是DOMContentLoaded之后，window.onload之前，这里需要注意的是document_idle在document_end之后，因此顺序是这样的：document_start->document_end->document_idle，而document_end和document_idle发生在DOMContentLoaded和onload之间； all_frames 决定是否注入到页面中的frames里面(frames的url需要匹配注入的条件)，默认false； match_about_blank 如果匹配注入的页面打开了一个about:blank frame，是否也注入到这个blank页面中，默认false； exclude_matches 和matches，排除某些站点； include_globs 配置了此项，那么站点要同时满足matches和include_globs才会命中注入； exclude_globs 配置了此项和exclude_matches，那么站点要同时满足exclude_matches和exclude_globs才会命中注入；编程注入 编程注入需要注册service_worker，例如： "permissions": [ "activeTab" // 需要访问激活标签页的权限，这样才能往页面动态注入脚本 ], "background": { "service_worker": "background.js" } 复制代码 //// content-script.js //// document.body.style.backgroundColor = 'orange'; 复制代码 //// background.js //// chrome.action.onClicked.addListener((tab) => { chrome.scripting.executeScript({ target: { tabId: tab.id }, files: ['content-script.js'] }); }); 复制代码当然还可以提供一个函数执行，而不是js文件，这一部分呢我也没咋用过，就说这么多吧。 3.chrome APIs权限由于是浏览器扩展的脚本，被赋予了访问chrome APIs的能力，比如storage，可以访问本地存储，还有i18n和runtime。 4.隔离性我们的content scripts脚本运行在一个隔离的环境中，这里我也没太明白，就不误导人了。 options pageoptions page其实就是提供给用户对扩展进行一些设置的页面，比如说当用户在工具栏右键点击插件图标，或者导航到扩展的管理页面，并点击【详细】按钮，就会显示options page页面， { "name": "My extension", ... "options_page": "options.html", ... } 复制代码上面的示例是新打开了一个页面，当然这不是必须的，你也可以设置成弹窗的形式，具体如下： { "name": "My extension", ... "options_ui": { "page": "options.html", "open_in_tab": false }, ... } 复制代码不知不觉就抄了官网这么多内容，当然这只是粗浅的简介，还有很多内容可以深入学习，今天就不多说了，后面有机会再逐一探讨吧。 参考资料 官方示例：github.com/GoogleChrom… 官方文档：developer.chrome.com/docs/extens… |
【本文地址】